<template>
	<view class="container">
		<image src="/static/back4.jpg" mode="" class="back"></image>
		<view class="" style="padding: 30rpx;">
			<view class="header">
				<text class="title">我的班级</text>
			</view>

			<view class="card">
				<view class="card-header">
					<view class="card-title">{{ grade }}</view>
					<view class="card-subtitle">班级成员：{{ students.length }}名</view>
				</view>
			</view>

			<view class="card toolbox">
				<view class="card-header">
					<text class="card-title">班级工具箱</text>
				</view>
				<view class="" style="display: flex;justify-content: space-around; margin-top: 20px;">
					<view class="card-body">
						<button class="button" @click="showSpinner">随机选人</button>
					</view>
					<view class="card-body">
						<button class="button" @click="add">快速加分</button>
					</view>
				</view>
			</view>

			<view class="card filter">
				<view class="card-header">
					<text class="card-title">筛选日期</text>
				</view>
				<view class="card-body">
					<view class="date-filter">
						<view class="date-picker">
							<text>开始日期:</text>
							<picker mode="date" @change="onStartDateChange">
								<view class="picker-item">{{ startDate || '选择开始日期' }}</view>
							</picker>
						</view>
						<view class="date-picker">
							<text>结束日期:</text>
							<picker mode="date" @change="onEndDateChange">
								<view class="picker-item">{{ endDate || '选择结束日期' }}</view>
							</picker>
						</view>
					</view>
					<view class="" style="display: flex;">
						<button class="filter-button" @click="filterScores2">重置</button>
						<button class="filter-button" @click="filterScores">点击筛选</button>
					</view>
					
				</view>
			</view>

			<view class="card">
				<view class="card-header">
					<text class="card-title">班级成员管理</text>
				</view>
				<view class="card-body">
					<view v-for="(stu, index) in students" :key="stu.userId" class="member"
						@click="redirect(stu.userId, stu.studentName)">
						<text>{{ index + 1 }}. {{ stu.studentName }}</text>
						<text>{{ stu.totalScore }} 分</text>
					</view>
				</view>
			</view>
		</view>
		<Spinner ref="spinner" :students="students"></Spinner>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';

	export default {
		data() {
			return {
				grade: "",
				students: [],
				allStudents: [], // 保存所有学生数据
				startDate: '', // 开始日期
				endDate: '', // 结束日期
				allScores: [] // 保存所有分数数据
			};
		},
		onLoad(e) {
			this.grade = e.grade;
		},
		onShow() {
			this.fetchStudents();
		},
		methods: {
			filterScores2(){
				this.calculateTotalScores(this.allScores)
			},
			add() {
				uni.navigateTo({
					url: "/pages/addScore/addScore?students=" + JSON.stringify(this.students)
				});
			},
			fetchStudents() {
				let that = this;
				uni.request({
					url: globalVariable + "/getStudentsByGrade?grade=" + this.grade,
					success(res) {
						let info = res.data;

						that.allStudents = info.data.map(student => ({
							...student,
							totalScore: 0 // 初始化总分
						}));
						that.students = [...that.allStudents];

						that.fetchScores();
					}
				});
			},
			fetchScores() {
				let that = this;
				uni.request({
					url: globalVariable + "/getScoresAll",
					success(res) {
						let info = res.data;

						that.allScores = info.data;
						that.calculateTotalScores(that.allScores);
					}
				});
			},
			calculateTotalScores(scoreAll) {
				let scoresByStudent = {};
				scoreAll.forEach(scoreRecord => {
					if (scoresByStudent[scoreRecord.studentId]) {
						if (scoreRecord.role == 1) {
							scoresByStudent[scoreRecord.studentId] += scoreRecord.score;
						} else {
							scoresByStudent[scoreRecord.studentId] -= scoreRecord.score;
						}
					} else {
						scoresByStudent[scoreRecord.studentId] = scoreRecord.role == 1 ? scoreRecord.score : -
							scoreRecord.score;
					}
				});

				this.students.forEach(student => {
					student.totalScore = scoresByStudent[student.userId] || 0;
				});

				this.students.sort((a, b) => b.totalScore - a.totalScore);
				this.$forceUpdate();
			},
			showSpinner() {
				this.$refs.spinner.showSpinner();
			},
			redirect(id, name) {
				uni.navigateTo({
					url: "/pages/Pstudent/Pstudent?studentId=" + id + "&stuName=" + name
				});
			},
			onStartDateChange(event) {
				this.startDate = event.detail.value;
			},
			onEndDateChange(event) {
				this.endDate = event.detail.value;
			},
			filterScores() {
				if (!this.startDate || !this.endDate) {
					uni.showToast({
						title: '请选择开始时间和结束时间',
						icon: 'none'
					});
					return;
				}

				// 获取开始和结束日期
				const start = new Date(this.startDate);
				const end = new Date(this.endDate);

				// 确保结束日期不早于开始日期
				if (end < start) {
					uni.showToast({
						title: '结束时间不能早于开始时间',
						icon: 'none'
					});
					return;
				}

				// 筛选分数数据
				const filteredScores = this.allScores.filter(score => {
					const scoreDate = new Date(score.time);
					return scoreDate >= start && scoreDate <= end;
				});

				this.calculateTotalScores(filteredScores);
			}
		}
	};
</script>
<style scoped>
	.back {
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		z-index: -1;
	}

	/* Global Styles */
	.container {}

	.header {
		text-align: center;
		margin-bottom: 24px;
	}

	.title {
		font-size: 28px;
		font-weight: bold;
		color: #333;
	}

	.card {
		margin-bottom: 16px;
		padding: 20px;
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 0.6);
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	}

	.card-header {
		margin-bottom: 8px;
	}

	.card-title {
		font-size: 22px;
		font-weight: bold;
		color: #444;
	}

	.card-subtitle {
		font-size: 16px;
		color: #999;
	}

	.card-body {
		display: flex;
		flex-direction: column;
	}

	.member {
		display: flex;
		justify-content: space-between;
		padding: 12px 0;
		border-radius: 20rpx;
	}

	.button {
		padding: 12px;
		background-color: rgba(60, 187, 255, 0.6);
		color: white;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		text-align: center;
		font-size: 16px;
		transition: background-color 0.3s;
	}

	.button:hover {
		background-color: rgba(45, 145, 194, 0.6);
	}

	.toolbox .card-body {
		align-items: center;
	}

	.date-filter {
		margin: 20px 0;
	}

	.date-picker {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.picker {
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		text-align: center;
	}

	.filter-button {
		width: 40%;
		padding: 12px;
		/* background-color: #4CAF50; */
		background-color: rgba(60, 187, 255, 0.6);
		color: white;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		text-align: center;
		font-size: 16px;
		
	}
</style>